<template>
	<view class="page">
		<up-navbar :bgColor="navbarInfo.bgColor" :titleStyle="navbarInfo.titleStyle" leftIcon="" title="借款审批系统"
			:autoBack="true">
		</up-navbar>
		<view class="top-bg" :style="{'background-image': 'url('+index_top_bg+')'}">
			<view class="color-fff font-48">{{nickname}}，欢迎你！</view>
		</view>
		<view class="tab-box bg-color-fff">
			<up-tabs :scrollable="false" :list="list1" @click="hanldeTabs"></up-tabs>
		</view>

		<view class="list-box pad-26 color-text" v-if="list.length > 0">

			<view class="list" v-for="(item,index) in list" :key="item.id">
				<view class="bg-color-fff radius16 mar-bottom-16">
					<view class="betweenX pad-left-right-20 pad-top-bottom-26">
						<view class="color-grey">{{item.order_no}}</view>
						<view v-if="item.status == 0" class="font-32 color-theme">待支付</view>
						<view v-else-if="item.status == 1" class="font-32 color-theme">审核中</view>
						<view v-else-if="item.status == 3" class="font-32 color-theme">已完成</view>
						<view v-else-if="item.status == 4" class="font-32 color-theme">已驳回</view>
					</view>
					<up-line></up-line>
					<view class="centerY pad-top-bottom-20 font-28 pad-left-right-20">
						<view class="item">申请所在地区</view>
						<view class="mar-left-100">{{item.city}}</view>
					</view>
					<view class="centerY pad-top-bottom-20 font-28 pad-left-right-20">
						<view class="item">申请预借金额</view>
						<view v-if="item.money" class="mar-left-100">￥{{item.money}}</view>
					</view>
					<!-- <view class="centerY pad-top-bottom-20 font-28 pad-left-right-20">
						<view class="item">当地城市费率</view>
						<view class="mar-left-100">{{item.percent}}</view>
					</view> -->
					<view class="centerY pad-top-bottom-20 font-28 pad-left-right-20">
						<view class="item">手续费</view>
						<view v-if="item.fee" class="mar-left-100">￥{{item.fee}}</view>
					</view>
					<up-line></up-line>
					<view class="betweenX pad-left-right-20 pad-top-bottom-26 centerY">
						<view v-if="item.create_time" class="color-grey shrink font-28 mar-right-100">{{item.create_time}}</view>
						<up-button @click="hanldePay(item)" v-if="item.status == 0" class="flex-w" type="primary"
							text="前往付款"></up-button>
					</view>
				</view>

				<view v-if="item.status == 4" class="bg-color-fff radius16 mar-bottom-16 reason">
					<view class="betweenX pad-left-right-20 pad-top-bottom-26">
						<view class="font-32">驳回原因</view>
					</view>
					<up-line></up-line>
					<view class="pad-top-bottom-20 font-28 pad-left-right-20">
						<view class="font-30">{{item.reason}}</view>
						<view class="color-grey font-28 mar-top-20">{{item.time}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="centerXY columnY" v-else>
			<image class="nothing" src="../../static/image/nothing.png" mode=""></image>
			<view class="color-grey font-30">暂无申请记录</view>
		</view>
		<view class="button-bottom-box">
			<up-button @click="isPopup = true" type="primary" text="发起申请"></up-button>
		</view>


		<up-popup :show="isPopup" @close="isPopup = false" mode="center" round="10" bgColor="#FFFFFF">
			<view class="up-popup-box">
				<view class="centerXY">
					<image class="title-icon" src="../../static/image/title-icon.png" mode=""></image>
					<view class="pad-left-right-30 color-text font-40">{{dataInfo.key_name}}</view>
					<image class="title-icon" src="../../static/image/title-icon.png" mode=""></image>
				</view>
				<scroll-view scroll-y="true" class="notice-box">
					<rich-text :nodes="dataInfo.key_value"></rich-text>
				</scroll-view>
				<up-button @click="hanldeApplication" type="primary" text="发起申请"></up-button>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		onUnmounted,
	} from 'vue';

	import {
		orderList,
		orderPay,
		config
	} from '../../api/index.js'

	import {
		onReachBottom,
		onPageScroll,
		onShow
	} from '@dcloudio/uni-app'

	import {
		index_top_bg
	} from '../../common/config.js'


	// 弹窗
	let isPopup = ref(false);
	let dataInfo = ref({});

	const getconfig = () => {
		config().then(res => {
			dataInfo.value = res.data[0]
		})
	}

	// 用户信息
	let nickname = ref(uni.getStorageSync('nickname'));

	let data = reactive({
		page: 1,
		limit: 10,
		status: ''
	})

	let list = ref([]);
	let pageInfo = ref({});

	// 获取列表数据
	const getOrderList = () => {
		orderList(data).then(res => {
			list.value = list.value.concat(res.data.data);
			data.page = data.page + 1;
			pageInfo.value = res.data;
		})
	}

	// 加载更多
	onReachBottom((e) => {
		if (pageInfo.value.current_page != pageInfo.value.last_page) {
			getOrderList();
		}
	})

	let navbarInfo = reactive({
		bgColor: 'transparent',
		titleStyle: {
			color: '#FFFFFF'
		}
	})

	// 滚动监听
	onPageScroll((e) => {
		if (e.scrollTop > 150) {
			navbarInfo.bgColor = '#FFFFFF';
			navbarInfo.titleStyle = {
				color: '#000000'
			};
		} else {
			navbarInfo.bgColor = 'transparent';
			navbarInfo.titleStyle = {
				color: '#FFFFFF'
			};
		}
	})

	// 跳转申请
	const hanldeApplication = () => {
		isPopup.value = false;
		uni.navigateTo({
			url: '/pages/application/application'
		})
	}

	// 跳转支付
	const hanldePay = (item) => {
		orderPay({
			order_id: item.id
		}).then(res => {

			let data = {
				...item,
				payInfo: res.data,
			}
			
			if(res.data == ''){
				uni.showToast({
					title: '支付成功',
					icon: 'success'
				})
				list.value = [];
				data.page = 1;
				getOrderList();
			}else{
				uni.setStorageSync('payInfo', data);
				uni.navigateTo({
					url: '/pages/order/order'
				})
			}
		})
	}

	onShow(() => {
		getOrderList();
		getconfig();
	});

	// tabs
	const list1 = reactive([{
			name: '全部订单'
		},
		{
			name: '待付款',
			status: 0
		},
		{
			name: '审核中',
			status: 1
		},
		{
			name: '已完成',
			status: 3
		},
		{
			name: '已驳回',
			status: 4
		},
	]);

	const hanldeTabs = (e) => {
		list.value = [];
		data.page = 1;
		data.status = e.status;
		getOrderList();
	}
</script>

<style lang="scss" scoped>
	.page {
		background: $uni-bg-color !important;
		padding-bottom: 140rpx;
		min-height: 100vh;
	}

	.top-bg {
		background-size: 100% 100%;
		width: 100%;
		height: 400rpx;
		padding: 200rpx 40rpx 0 40rpx;
		box-sizing: border-box;
		font-family: Source Han Sans CN, Source Han Sans CN;
	}

	.tab-box {
		margin-top: -30rpx;
		border-radius: 30rpx 30rpx 0 0;
	}

	.list-box {
		.item {
			width: 180rpx;
			color: $color-second;
		}
	}

	.button-bottom-box {
		width: 100%;
		background-color: #fff;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		padding: 20rpx 26rpx;
		box-sizing: border-box;
		z-index: +99;
	}

	.reason {
		position: relative;
	}

	.reason::after {
		content: '';
		position: absolute;
		left: 40rpx;
		top: -25rpx;
		width: 16rpx;
		height: 40rpx;
		background: $color-theme;
		z-index: 1;
	}

	.reason::before {
		content: '';
		position: absolute;
		right: 40rpx;
		top: -25rpx;
		width: 16rpx;
		height: 40rpx;
		background: $color-theme;
		z-index: 1;
	}

	.nothing {
		display: block;
		width: 500rpx;
		height: 340rpx;
	}

	.title-icon {
		width: 22rpx;
		height: 22rpx;
	}

	.up-popup-box {
		width: 680rpx;
		height: 640rpx;
		padding: 60rpx;
		box-sizing: border-box;
	}

	.notice-box {
		width: 100%;
		height: 350rpx;
		margin-top: 54rpx;
	}
</style>